Summary

Stage 2 PR-1 of 4 waves (spec: `docs/superpowers/specs/2026-05-15-examples-theme-sync-stage-2-design.md`). Migrates the 10 remaining cockpit chat example apps to the proven Stage 2 pattern, following the chat-timeline pilot + PR-0 library auto-install.

Apps migrated

• `cockpit-chat-messages-angular`
• `cockpit-chat-input-angular`
• `cockpit-chat-interrupts-angular`
• `cockpit-chat-tool-calls-angular`
• `cockpit-chat-subagents-angular`
• `cockpit-chat-threads-angular`
• `cockpit-chat-generative-ui-angular`
• `cockpit-chat-debug-angular`
• `cockpit-chat-theming-angular`
• `cockpit-chat-a2ui-angular` (also wrapped in `` for structural consistency)

Per-app migration (uniform pattern)

1. Drop Tailwind v3 CDN script + dark-only body classes from `index.html`
2. Replace `styles.css` with `@import "@ngaf/example-layouts/theme.css"` + html/body globals using `--ngaf-chat-*` tokens
3. `main.ts` stays clean (no explicit `installEmbeddedTheme()` — the PR-0 auto-install handles it via transitive layout-component import)
4. Component templates: replace any legacy `var(--chat-, hardcoded-hex)` patterns with bare `var(--ngaf-chat-)` references
5. Build verification per app

Special cases handled

• a2ui: wrapped in `` (was using `` directly). Now structurally consistent with the other 30 chat-family example apps.
• theming: the demo's intentional `THEMES` dictionary (dark/light/ocean/forest presets with hardcoded hex) preserved — the demo's whole point is showing theme variation, not following the host palette.
• generative-ui: SVG `fill="#d4aa6a"` in chart components preserved — data-viz accent, not chrome theming.

External developer reference quality

After this PR, every chat example's `main.ts` is the clean Angular reference shape — no cockpit-specific calls. The theme sync happens transparently via the `@ngaf/example-layouts` import side effect (PR-0).

Test plan

• `pnpm nx run-many -t build -p` all 10 chat angular apps — green
• CI verifies full check stack
• Manual chrome MCP smoke per app (post-merge — user-driven)

PR-2 (langgraph wave), PR-3 (deep-agents), PR-4 (render+ag-ui) follow.

🤖 Generated with Claude Code